<template>
  <el-menu
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    router
    :default-active="$route.path"
  >
    <el-menu-item index="../doctor/info">
      <el-icon><icon-menu /></el-icon>
      <template #title>个人信息</template>
    </el-menu-item>
    <el-menu-item index="../doctor/aInfo">
      <el-icon><icon-menu /></el-icon>
      <template #title>预约信息</template>
    </el-menu-item>
    <el-menu-item index="../doctor/aptHistory">
      <el-icon><setting /></el-icon>
      <template #title>诊疗记录</template>
    </el-menu-item>
    <el-sub-menu>
      <template #title>
        <el-icon><location /></el-icon>
        <span>药品相关</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="../doctor/storageMedicine">药品登记入库</el-menu-item>
        <el-menu-item index="../doctor/checkMedicine">药品库存查看</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>
  
  <script lang="ts" setup>
// import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>
  <style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>